<script setup>
import lusckinfo from '@/components/lusckinfo.vue'

const props = defineProps({
  user: Object
})

const emit = defineEmits(['changeStatus', 'clickControl'])

</script>

<template>
  <div class="user-item">
    <lusckinfo
      :nickname="user.name"
      :avatar="user.image"
      :id="user.id"
      :role="userRole"
      :lucky="user"
    ></lusckinfo>
    <div class="user-control">
      <van-switch
        inactive-color="red"
        @update:model-value="emit('changeStatus', { id: user.id, status: $event })"
        class="user-control-switch"
        :model-value="user.status === 1"
        :disabled="user.status === -1"
      />
      <van-button size="small" type="primary" @click="emit('clickControl', user.id)"
        >随机码
      </van-button>
      <van-button style="margin-left: 10px;" size="small" type="success" @click="emit('copy', user)"
        >复制
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.user-item {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .user-control {
    display: flex;
    align-items: center;

    .user-control-switch {
      margin-right: 10px;
    }
  }
}
</style>
